<template>
	<div class="letter_item">
		<i class="el-icon-badge-unread" v-if="data.isRead === '0'"></i>
		<div class="content">
			<h4 v-ellipsis="2">
				<a @click="handleViewLetter(data)">{{ data.title }}</a>
			</h4>
			<p v-if="type === '1'">
				<span>收件人：{{ recipients }}</span>
				<em>收件时间：{{ data.updateTime }}</em>
			</p>
			<p v-else-if="type === '2'">
				<el-tooltip effect="dark" :content="recipients" placement="top">
					<span>收件人：{{ recipients }}</span>
				</el-tooltip>
				<em>发件时间：{{ data.updateTime }}</em>
			</p>
		</div>
		<!-- <el-button type="success" size="mini" @click="handleViewLetter(data)">查看私信</el-button> -->
		<el-button class="delete" type="text" size="mini" @click="handleDeleteLetter(data)">删除信件</el-button>
	</div>
</template>

<script>
import { deleteNotice, deletePrivateLetter, readOneLetter } from '@/api/front/sysNotice';
export default {
	props: {
		type: { type: String, default: '1' },
		data: { type: Object, default: () => {} }
	},
	computed: {
		recipients() {
			if (this.type === '1') {
				return this.data?.sendUser?.userName || '';
			} else if (this.type === '2') {
				let receiveUsers = this.data?.receiveUserList || [];
				let receiveUserArr = receiveUsers.filter((item) => !!item);
				return receiveUserArr.map((item) => item.userName).join('，');
			}
		}
	},
	methods: {
		async handleViewLetter(data) {
			if (data.isRead === '0') {
				let result = await readOneLetter(data.id).then((res) => res.data);
				if (result.code === '0') {
					console.log(result);
				}
			}
			this.$router.push(`/front/userCenter/message/${data.id}`);
		},

		handleDeleteLetter(data) {
			this.$confirm('此操作将永久删除该信件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				beforeClose: async (action, instance, done) => {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						if (this.type === '1') {
							await this.deletePrivateRequest(data.id);
						} else if (this.type === '2') {
							await this.deleteNoticeRequest(data.id);
						}
						instance.confirmButtonLoading = false;
					}
					done();
				}
			}).catch(() => {});
		},

		//删除发送的信件
		async deleteNoticeRequest(id) {
			let result = await deleteNotice(id).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除信件成功');
				this.$emit('refresh');
			}
		},

		//删除收到的信件
		async deletePrivateRequest(id) {
			let params = { ids: id };
			let result = await deletePrivateLetter(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除信件成功');
				this.$emit('refresh');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.letter_item::v-deep {
	display: flex;
	position: relative;
	border: solid 1px #ebeef5;
	&:nth-child(n + 2) {
		border-top: none;
	}
	i.el-icon-badge-unread {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		font-size: 28px;
	}
	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 12px 16px 16px;
		overflow: hidden;
		position: relative;
		z-index: 2;
		flex: 1;
		h4 {
			font-size: 15px;
			line-height: 1.5;
			font-weight: normal;
			min-height: 3em;
			a {
				color: #303133;
				cursor: pointer;
				&:hover {
					color: var(--primary-active);
				}
			}
		}
		p {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #909399;
			line-height: 1;
			margin-top: 12px;
			em {
				flex-shrink: 0;
				overflow: hidden;
				font-style: normal;
			}
			span.el-tooltip {
				overflow: hidden;
				margin-right: 30px;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
	.el-button.delete {
		width: 72px;
		padding: 16px;
		font-size: 15px;
		line-height: 1.5;
		white-space: normal;
		border-left: solid 1px #ebeef5;
	}
}
</style>
